<!-- 新闻详情 -->
<template>
	<view>
		<!-- 白屏展位 -->
		<u-loading-page :loading="loading" image="/static/logo.png">
		</u-loading-page>
		<!-- 详情展示 -->
		<view class="page" v-if="!loading">
			<scroll-view :scroll-y='true' style="height:100%;">
				<view class="news_box">
					<text class="news_title">{{data.news_title}}</text>
					<view class="news_info">
						<text class="news_source">{{data.news_author}}</text>
						<text class="news_date">{{data.release_time}}</text>
					</view>
					<image class="news_bigger_image" mode="aspectFill" :src="data.news_cover"></image>
					<u-parse :content="data.news_content"></u-parse>
				</view>
			</scroll-view>

		</view>
		<!-- 点赞 -->
		<view v-if="!loading" style="display: flex;flex-direction:row-reverse;width: 100%;">
			<view style="margin-right: 50rpx;">
				<u-icon :name="heartStus[clickStus].name" :color="heartStus[clickStus].color" size="28"
					@click="loveClick"></u-icon>
				<u-badge numberType="overflow" :type="type" max="99" :value="value"></u-badge>

			</view>

		</view>
		<view class="uni-padding-wrap">
			评论区：
			<!-- 评论区 start -->
			<view class="uni-comment">
				<view class="uni-comment-list" v-for="(item, index) in commentData" :key="item">
					<view class="uni-comment-face">
						<image :src="item.avatar_url" mode="widthFix">
						</image>
					</view>
					<view class="uni-comment-body">
						<view class="uni-comment-top">
							<text>{{item.nick_name}}</text>
						</view>
						<view class="uni-comment-date">
							<text>{{item.review_time}}</text>
						</view>
						<view class="uni-comment-content">{{item.review_content}}</view>
					</view>
				</view>
			</view>
			<u-search v-if="!loading" searchIcon="@/static/img/转发.png" :showAction="true" :clearabled="true"
				actionText="发布" placeholder="请输入想发布的评论" v-model="commentValue" :animation="true"
				@custom="handleClickComment"></u-search>
		</view>
	</view>
</template>

<script>
	import api from "../../../common/api/api.js"
	import currentData from '../../../common/time-utils/currentData.js';
	export default {
		data() {
			return {
				id: null,
				loading: true,
				data: null,
				heartStus: [{
					name: "heart",
					color: ""
				}, {
					name: "heart-fill",
					color: "#fa3534"
				}],
				clickStus: 0,
				type: "error",
				value: 10,
				commentData: [],
				commentValue: ""
			}
		},
		async onLoad(e) {
			// 获取传过来的参数请求数据
			setTimeout(() => {
				console.log("查看了")
				api("/recent_views/recent_views_insert?news_id=" + this.data.news_id + "&user_id=" +
					uni.getStorageSync("openid") + "&recent_views_time=" + currentData.getDate(), {},
					"post").then((
					res) => {
					console.log(res)
				})
			}, 5000)
			this.id = e
			let newData = await api("/news/news_selectByNewsId?news_id=" + e.titleId)
			this.data = newData.data
			// this.value = (await api("/news/news_like_selectLikeNum?news_id=" + this.data.news_id)).data
			// console.log(this.value)
			this.value = this.data.like_num
			let is_like = await api("/news/news_like_selectById?user_id=" + uni.getStorageSync("openid") +
				"&news_id=" +
				this.data.news_id, {}, "get")
			if (is_like.data.length > 0) {
				this.clickStus = 1
			}
			this.commentData = (await api("/news/news_review_selectByNewsId?news_id=" + this.data.news_id)).data
			this.loading = false
		},
		methods: {
			async loveClick() {
				if (uni.getStorageSync("userInfo") ? false : true) {
					uni.showToast({
						title: '请登录',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (this.clickStus === 0) {
					this.value++
					let res = await api("/news/news_like_insert?news_id=" + this.data.news_id +
						"&user_id=" + uni.getStorageSync("openid") + "&like_time=" + currentData.getDate() +
						"&nick_name=" + uni.getStorageSync("userInfo").nick_name, {},
						"post")
				} else {
					this.value--
					let res = await api("/news/news_like_deleteById?user_id=" + uni.getStorageSync("openid") +
						"&news_id=" + this.data.news_id, {}, "get")
				}
				this.clickStus = this.clickStus === 0 ? 1 : 0
			},
			async handleClickComment() {
				if (uni.getStorageSync("userInfo") ? false : true) {
					uni.showToast({
						title: '请登录',
						icon: 'none',
						duration: 2000
					})
					return
				}
				let res = await api(
					"/news/news_review_insert?news_id=" + this.data.news_id + "&review_time=" +
					currentData.getDate() +
					"&review_content=" + this.commentValue + "&user_id=" + uni.getStorageSync("openid") +
					"&nick_name=" + uni.getStorageSync("userInfo").nick_name, {}, "post"
				)
				this.commentData.push({
					nick_name: uni.getStorageSync("userInfo").nick_name,
					user_id: uni.getStorageSync("openid"),
					review_time: currentData.getDate(),
					review_content: this.commentValue
				})
				this.commentValue = ""
				uni.showToast({
					title: '发布成功',
					icon: "success",
					duration: 2000
				});
				console.log(res)
			}
		}
	}
</script>

<style>
	.box {
		width: 100px;
		height: 100px;
		background-color: #909193;
		border-radius: 15px;
	}

	.news_box {
		display: flex;
		flex-direction: column;
		padding: 18px;
	}

	.news_title {
		font-size: 20px;
		font-weight: bold;
		line-height: 32px;
	}

	.news_info {
		margin-bottom: 16px;
		margin-top: 16px;
	}

	.news_source {
		font-size: 12px;
		color: #B4B4B4;
	}

	.news_date {
		margin-left: 8px;
		font-size: 12px;
		color: #B4B4B4;
	}

	.news_bigger_image {
		width: 680rpx;
		height: 420rpx;
		border: 1px solid #EEF0F4;
	}

	.news_content {
		margin-top: 8px;
		font-size: 18px;
		line-height: 32px;
	}

	.u-content {
		padding: 24rpx;
	}

	/* comment */
	page {
		background-color: #f8f8f8;
	}

	.uni-padding-wrap {
		padding: 30upx;
	}

	view {
		font-size: 28upx;
	}

	.uni-comment {
		padding: 5rpx 0;
		display: flex;
		flex-grow: 1;
		flex-direction: column;
	}

	.uni-comment-list {
		flex-wrap: nowrap;
		padding: 10rpx 0;
		margin: 10rpx 0;
		width: 100%;
		display: flex;
	}

	.uni-comment-face {
		width: 70upx;
		height: 70upx;
		border-radius: 100%;
		margin-right: 20upx;
		flex-shrink: 0;
		overflow: hidden;
	}

	.uni-comment-face image {
		width: 100%;
		border-radius: 100%;
	}

	.uni-comment-body {
		width: 100%;
	}

	.uni-comment-top {
		line-height: 1.5em;
		justify-content: space-between;
	}

	.uni-comment-top text {
		color: #0A98D5;
		font-size: 24upx;
	}

	.uni-comment-date {
		line-height: 38upx;
		flex-direction: row;
		justify-content: space-between;
		display: flex !important;
		flex-grow: 1;
	}

	.uni-comment-date view {
		color: #666666;
		font-size: 24upx;
		line-height: 38upx;
	}

	.uni-comment-content {
		line-height: 1.6em;
		font-size: 28upx;
		padding: 8rpx 0;
	}

	.uni-comment-replay-btn {
		background: #FFF;
		font-size: 24upx;
		line-height: 28upx;
		padding: 5rpx 20upx;
		border-radius: 30upx;
		color: #333 !important;
		margin: 0 10upx;
	}
</style>